<template>
  <div class="process_con">
    <el-table :data="tableData" :height="tableHeight">
      <el-table-column prop="createTime" label="创建时间" width="180" />  
      <el-table-column prop="remark" label="待办">
        <template #default="scope">
          <span v-html="scope.row.remark"></span>
        </template>
      </el-table-column>
      <el-table-column prop="nextTime" label="待办截止日期" width="180" />  
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button v-if="scope.row.status === 1" plain type="primary" size="small" @click="handleComplate(scope.row)">完成</el-button>
          <el-button plain type="primary" size="small" @click="handleEdit(scope.row)">查看</el-button>
          <!-- <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button> -->
          <el-button plain type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination_con">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pagination.page"
        :total="pagination.total"
        small background layout="prev, pager, next"
      />
    </div>
    <AddModal :editable="false" v-if="visable" :data="form" @close="handlerClose" />
  </div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted, defineAsyncComponent, defineProps } from 'vue';
import api from '/@/api/email/index';

const AddModal = defineAsyncComponent(() => import('./addModal.vue'));

const props = defineProps({
  inquiryId: {
    type: String,
    default: '',
  }
});

const tableData = ref([]);

const visable = ref(false);
const form = ref<any>({});

const tableHeight = ref<any>(240);

const pagination = ref({
  page: 1,
  size: 10,
  total: 0
});

const getList = async () => {
  let params: any = {
    pageNum: pagination.value.page,
    pageSize: pagination.value.size,
    inquiryId: props.inquiryId
  };

  const res = await api.inquiry.getPlanList(params);
  if (res.code === 200) {
    tableData.value = res.data;
    pagination.value.total = res.total;//Math.ceil(res.total / pagination.value.size);
  }
};

const handleDel = async (row: any) => {
  ElMessageBox.confirm('确认删除吗?', { cancelButtonText: '取消', confirmButtonText: '确认' }).then(async () => {
    const res = await api.inquiry.delPlan(row.id);
    if (res.code === 200) {
      ElMessage({ type: 'success', message: '操作成功' });
      getList();
    }
  });
};

// const handleAdd = () => {
//   visable.value = true;
//   form.value = { inquiryId: props.inquiryId };
// }

const emit = defineEmits(['refresh']);

const handleComplate = (row: any) => {
  ElMessageBox.confirm('确认完成吗?', { cancelButtonText: '取消', confirmButtonText: '确认' }).then(async () => {
    const res = await api.inquiry.finishPlan(row.id);
    if (res.code === 200) {
      ElMessage({ type: 'success', message: '操作成功' });
      getList();
    }
  });
  emit('refresh');
};

const handleEdit = (row: any) => {
  visable.value = true;
  form.value = { ...row };
};

const handleCurrentChange = (page: number) => {
  pagination.value.page = page;
  getList();
};

const handlerClose = async (data?: any) => {
  visable.value = false;
  if (data) {
    const item: any = tableData.value.find((item: any) => item.id === form.value.id);
    if (item) {
      Object.assign(item, data);
    } else {
      getList();
    }
  }
};

const search = () => {
  pagination.value.page = 1;
  getList();
};

onMounted(() => {
  getList();
});

defineExpose({ search });
</script>
<style lang="scss" scoped>
// .process_con {
//   padding: 0 20px;
// }

.pagination_con {
  display: flex;
  justify-content: end;
  padding: 10px;
  background: #fff;
}

// .btn_con {
//   padding: 7px 10px;
//   display: flex;
//   justify-content: end;
// }
</style>
  